<template>
    <div class="about-page">
        <van-nav-bar title="About Social Dojo" left-text="Back" left-arrow @click-left="$router.back()" />

        <div class="about-content">
            <!-- App Info -->
            <div class="app-info">
                <div class="app-logo">
                    <van-icon name="medal-o" size="60" color="#1989fa" />
                </div>
                <h1>Social Dojo</h1>
                <p class="app-version">Version 1.0.0</p>
                <p class="app-description">
                    Master your social skills through AI-powered training sessions and connect with a supportive
                    community.
                </p>
            </div>

            <!-- Features -->
            <div class="features-section">
                <h2>Features</h2>
                <div class="features-list">
                    <div class="feature-item">
                        <van-icon name="play-circle-o" color="#07c160" />
                        <div class="feature-info">
                            <div class="feature-title">AI Training Sessions</div>
                            <div class="feature-desc">Practice with realistic AI characters</div>
                        </div>
                    </div>
                    <div class="feature-item">
                        <van-icon name="chart-trending-o" color="#1989fa" />
                        <div class="feature-info">
                            <div class="feature-title">Progress Tracking</div>
                            <div class="feature-desc">Monitor your skill development</div>
                        </div>
                    </div>
                    <div class="feature-item">
                        <van-icon name="friends-o" color="#f39c12" />
                        <div class="feature-info">
                            <div class="feature-title">Community Support</div>
                            <div class="feature-desc">Share experiences and get advice</div>
                        </div>
                    </div>
                    <div class="feature-item">
                        <van-icon name="medal-o" color="#e74c3c" />
                        <div class="feature-info">
                            <div class="feature-title">Achievements</div>
                            <div class="feature-desc">Earn badges for your progress</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Team -->
            <div class="team-section">
                <h2>Our Mission</h2>
                <p>
                    We believe everyone deserves to feel confident in social situations.
                    Social Dojo provides a safe, supportive environment to practice and
                    improve your communication skills at your own pace.
                </p>
            </div>

            <!-- Contact -->
            <div class="contact-section">
                <h2>Get in Touch</h2>
                <div class="contact-links">
                    <div class="contact-link" @click="openEmail">
                        <van-icon name="envelop-o" />
                        <span>support@socialdojo.com</span>
                    </div>
                    <div class="contact-link" @click="openWebsite">
                        <van-icon name="globe-o" />
                        <span>www.socialdojo.com</span>
                    </div>
                </div>
            </div>

            <!-- Legal -->
            <div class="legal-section">
                <div class="legal-links">
                    <span @click="$router.push('/privacy-policy')">Privacy Policy</span>
                    <span @click="$router.push('/terms')">Terms of Service</span>
                </div>
                <p class="copyright">© 2024 Social Dojo. All rights reserved.</p>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
const openEmail = () => {
    window.location.href = 'mailto:support@socialdojo.com'
}

const openWebsite = () => {
    window.open('https://www.socialdojo.com', '_blank')
}
</script>

<style lang="scss" scoped>
.about-page {
    min-height: 100vh;
    background: #f8f9fa;
}

.about-content {
    padding: 16px;
}

.app-info {
    text-align: center;
    background: white;
    border-radius: 16px;
    padding: 32px 24px;
    margin-bottom: 24px;

    .app-logo {
        margin-bottom: 16px;
    }

    h1 {
        font-size: 28px;
        font-weight: 600;
        color: #323233;
        margin: 0 0 8px 0;
    }

    .app-version {
        font-size: 14px;
        color: #969799;
        margin: 0 0 16px 0;
    }

    .app-description {
        font-size: 16px;
        color: #646566;
        line-height: 1.5;
        margin: 0;
    }
}

.features-section,
.team-section,
.contact-section {
    background: white;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 16px;

    h2 {
        font-size: 20px;
        font-weight: 600;
        color: #323233;
        margin: 0 0 16px 0;
    }

    p {
        font-size: 16px;
        color: #646566;
        line-height: 1.6;
        margin: 0;
    }
}

.features-list {
    display: flex;
    flex-direction: column;
    gap: 16px;

    .feature-item {
        display: flex;
        align-items: center;
        gap: 12px;

        .van-icon {
            font-size: 24px;
            flex-shrink: 0;
        }

        .feature-info {
            .feature-title {
                font-size: 16px;
                font-weight: 500;
                color: #323233;
                margin-bottom: 4px;
            }

            .feature-desc {
                font-size: 14px;
                color: #969799;
            }
        }
    }
}

.contact-links {
    display: flex;
    flex-direction: column;
    gap: 12px;

    .contact-link {
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        color: #1989fa;
        font-size: 16px;

        &:hover {
            opacity: 0.8;
        }

        .van-icon {
            font-size: 18px;
        }
    }
}

.legal-section {
    text-align: center;
    padding: 24px;

    .legal-links {
        display: flex;
        justify-content: center;
        gap: 24px;
        margin-bottom: 16px;

        span {
            color: #1989fa;
            cursor: pointer;
            font-size: 14px;

            &:hover {
                opacity: 0.8;
            }
        }
    }

    .copyright {
        font-size: 12px;
        color: #969799;
        margin: 0;
    }
}
</style>